<template>
  <div>
    <el-popover
      v-model="visible"
      trigger="click"
      popper-class="uploadIcon-pop"
      placement="top"
      @show="showPop"
    >
      <div class="pop-content">
        <div class="cont-head">
          <span :class="{active:active==='1'}" @click="tabClick('1')">系统图标</span>
          <span :class="{active:active==='2'}" @click="tabClick('2')">自定义图标</span>
        </div>
        <div>
          <!-- 图标 -->
          <div v-if="active==='1'" class="cont-body">
            <div class="color-con">
              <span v-for="item in colorList" :key="item" :style="{background:item}" :class="{activeColor:item === iconColor}" class="color-block" @click="handleIcon(item)" />
            </div>
            <div class="icon-con">
              <div v-for="item in uploadSvg" :key="item" :class="{activeIcon:item === activeIcon || item ===value}" class="icon-block" :style="{background:iconColor}" @click="iconClick(item)">
                <svg-icon :icon-class="item" class-name="icon-bg" />
              </div>
            </div>
          </div>
          <!-- 自定义 -->
          <div v-if="active==='2'" class="img-body">
            <appUpload :value="imgValuePan ? value :uploadImg" :list-type="!imgNull ? 'text' : 'picture-card'" :file-type="fileType" :file-size="fileSize" :recommendation="'建议尺寸200*200像素'" @input="value=>getImage(value)">
              <div v-if="!imgNull" class="up-slot">
                <img src="@/assets/images/notData.png">
                <div>暂无自定义图标</div>
                <div>请选择{{ fileSize }}MB以内的{{ fileType.join('、') }}图片</div>
                <div>建议尺寸200*200像素</div>
                <el-button style="margin-top:16px" size="small" icon="el-icon-upload2" type="primary" plain>选择上传新图标</el-button>
              </div>
            </appUpload>
          </div>
        </div>
      </div>
      <div slot="reference" style="display:inline-block">
        <el-button v-if="!nothingValue" size="small">选择图标</el-button>
        <div
          v-else
          class="reference-block"
          :style="{background: isSelfIcon ? '' : iconColor}"
          @mouseover="mouseOver"
          @mouseleave="mouseLeave"
        >
          <svg-icon v-if="!isSelfIcon" :icon-class="value" class-name="icon-bg" />
          <el-image v-else class="img" :src="value[0].url" />
          <div v-show="hoverShow" class="hover-mask">
            <i class="el-icon-edit-outline" />
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter'
import uploadSvg from './uploadSvg'
import appUpload from './appUpload'
export default {
  mixins: [emitter],
  components: {
    appUpload
  },
  props: {
    fileSize: {
      type: Number,
      default: 5
    },
    // 文件类型, 例如["doc", "xls", "ppt", "txt", "pdf"]
    fileType: {
      type: Array,
      default: () => ['png', 'jpg', 'jpeg']
    },
    value: {
      type: [Array, String],
      default: ''
    },
    iconColor: {
      type: String,
      default: 'linear-gradient(180deg, #FFCD87 0%, #CC5729 100%)'
    }
  },
  data() {
    return {
      uploadSvg,
      hoverShow: false,
      activeIcon: '',
      uploadImg: [],
      visible: false,
      active: '1',
      colorList: ['linear-gradient(180deg, #FFCD87 0%, #CC5729 100%)', 'linear-gradient(180deg, #B8E24B 0%, #129A37 100%)',
        'linear-gradient(180deg, #7DC1FC 0%, #1D4DD2 100%)', 'linear-gradient(180deg, #90E9E1 0%, #11838B 100%)',
        'linear-gradient(180deg, #F98D86 0%, #A1161F 100%)', 'linear-gradient(180deg, #C59AED 0%, #5A25B0 100%)',
        'linear-gradient(180deg, #3FB5FF 0%, #1D4DD2 100%)']
    }
  },
  computed: {
    isSelfIcon() {
      return Array.isArray(this.value)
    },
    nothingValue() {
      return !!(Array.isArray(this.value) ? this.value.length : this.value)
    },
    imgValuePan() {
      return !this.uploadImg.length && Array.isArray(this.value) && this.value.length
    },
    imgNull() {
      return this.uploadImg.length
    }
  },
  methods: {
    showPop() {
      if (!this.iconColor) {
        this.handleIcon(this.colorList[0])
      }
      // 点击编辑，如果是图片，需要给uploadImg赋值
      if (this.isSelfIcon && this.value.length && !this.uploadImg.length) {
        this.uploadImg = this.value
      }
    },
    getImage(value) {
      this.uploadImg = value
      this.handleInput(value)
    },
    clear() {
      this.activeIcon = ''
      this.uploadImg = []
      this.active = '1'
    },
    handleInput(newVal) {
      this.$emit('input', newVal)
      this.dispatch('ElFormItem', 'el.form.change', newVal)
    },
    handleIcon(newVal) {
      this.$emit('update:iconColor', newVal)
    },
    // 移入
    mouseOver() {
      this.hoverShow = true
    },
    mouseLeave() {
      this.hoverShow = false
    },
    tabClick(value) {
      this.active = value
      if (value === '1') {
        this.handleInput(this.activeIcon || this.value)
      } else {
        this.handleInput(this.uploadImg.length ? this.uploadImg : this.value)
      }
    },
    iconClick(item) {
      this.activeIcon = item
      this.handleInput(item)
    }
  }
}
</script>

<style lang="scss" scoped>
$width:320px;
$color:#3461FF;
$borderColor:#C2D0FF;
::-webkit-scrollbar{width:4px;}
.reference-block{
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    line-height: 56px;
    text-align: center;
    display: block;
    .img{
      border-radius: 14px;
      width: 100%;
      height: 100%;
    }
    .icon-bg{
       font-size: 32px;
     }
    .hover-mask{
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        font-size: 20px;
        background: #080e12;
        border-radius: 11px;
        opacity: 0.5;
        text-align: center;
        line-height: 48px;
        width: 100%;
    }
}
.pop-content{
    width: $width;
    .cont-head{
        height: 40px;
        line-height: 40px;
        display: flex;
        text-align: center;
        color: #131414;
        font-size: 14px;
        span{
            cursor: pointer;
            flex:1;
            border-bottom: 1px solid #E4E7ED ;
        }
        span.active{
            border-width: 2px;
            border-color: $color;
            color: $color;
        }
    }
    .cont-body{
        padding-bottom: 18px;
        .color-con{
            display: flex;
            padding: 16px 0 16px 18px;
            .color-block{
                width: 32px;
                height: 32px;
                border-radius: 50%;
                margin-right: 10px;
                cursor: pointer;
            }
            .color-block.activeColor{
                border: 2px solid $borderColor;
            }
        }
        .icon-con{
            background: #EBEEF5;
            border-radius: 8px 8px 8px 8px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 12px;
            padding: 3px 0 10px 12px;
            height: 260px;
            overflow: hidden;
            overflow-y: auto;
            overflow-x: hidden;
            .icon-block{
                width: 48px;
                height: 48px;
                margin: 7px 7px 0 0;
                border-radius: 14px;
                line-height: 56px;
                text-align: center;
                cursor: pointer;
                .icon-bg{
                  font-size: 32px;
                }
            }
            .icon-block.activeIcon{
                border: 2px solid $borderColor;
            }
        }
    }
    .img-body{
        height: 340px;
        .up-slot{
            img{
                margin: 60px 0 8px 0;
                width: 76px;
                height: 51px;
            }

            font-size: 13px;
            text-align: center;
            width: $width;
            color: #909399;
            line-height: 24px;
        }

    }
}

.img-body ::v-deep .upload-demo{
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 322px;
            display: flex;
}
.img-body ::v-deep .el-upload-list__item-actions .el-upload-list__item-preview{
    display: none;
}
.img-body ::v-deep .el-upload-list__item-delete{
  margin-left: 0px;
}
</style>

<style lang="scss">
.uploadIcon-pop.el-popover{
    padding: 0px !important;
    max-width: 520px !important;
    max-height:500px !important;
    overflow: hidden;
}
</style>
